直接進入頁配主題，今日我們要聊聊 AJAX。

AJAX

前言

先來看一下維基百科的介紹:

AJAX 即「Asynchronous JavaScript and XML」（非同步的 JavaScript 與 XML 技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。 來源:維基百科

在開發網站時，AJAX 常被用來與伺服器傳遞資料，但是你可能會想說，我直接用 form 表單也可以送出資料，然後伺服器收到處理後就回傳給我結果頁面。

但是這樣會有一個問題，如果僅是需要取得少部分資料而已，有需要到讓伺服器回傳一個新的 HTML 嗎?

像是你可能想要取得某個留言內容，結果在你點選查看更多的按鈕時，頁面就整個白白的，然後等待伺服器回傳新的頁面，傳回的新頁面和舊頁面相似度也達 99%，因為我只是想要看那則留言而已...

這則留言，讓我花了幾秒鐘等待頁面重新載入...這是多麼浪費資源和破壞使用者體驗的事情啊!

所以現今網頁，大多會使用 AJAX 來處理這種問題，也就是只向伺服器取得需要的資料，並且等到資料取回後，再透過 JS 渲染到前端畫面上。

甚至做的更完全一點，整個頁面都是透過 JS 來控制與渲染，也就是你在使用該網站時，至始至終都在那個頁面，不會有跳轉到新頁面(網址)的情況，這種應用就稱為 SPA 單頁應用(single-page application)。

我們常常在使用的 gmail 也是這樣，並沒有因為點了某封郵件，畫面就整個重新載入，大大提升了使用者體驗。

But

SPA 並沒有這麼簡單，真正使用時可能會遇到複雜的邏輯與路由問題，而且因為內容都是由 JS 產生，導致 SEO 遇到障礙，所有又產生了 SSR(Server Side Render) 相關技術，也就是一些影響 SEO 的重要內容，先由伺服器回傳，讓搜尋引擎爬蟲能夠爬的到。

扯遠了，我們來看看怎麼透過 JS 使用 AJAX 吧。

XHR

AJAX 在 JS 中，是透過 XMLHttpRequest(XHR) 物件作為實作。
它能夠在 client 端對 server 端送出 http request，使用的資料格式是 XML(這也變成時代眼淚，現今大多使用 JSON，它的格式像是 JS 中的物件)，正如同我們上方提到的定義:

AJAX 即「Asynchronous JavaScript and XML」（非同步的 JavaScript 與 XML 技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。 來源:維基百科

使用流程是建立一個 XHR 物件，設定 URL 與 method 然後送出 request，並等待伺服器 response 後，透過 callback function 來進行後續動作。

程式碼大概長這樣

var xhr = new XMLHttpRequest();

// true: 非同步 , false: 同步
xhr.open('get', 'http://xxx', true);

xhr.send(null);

XMLHttpRequest 有各種狀態碼(readyState)，能夠知道當前進行到什麼狀態了

各種數字代表的涵義如下:

• 0
  已經產生 XMLHttpRequest，但還沒連結到要取得的網址。
• 1
  用了 open() ，但還沒傳送資料過去
• 2
  用了 send()
• 3
  loading 資料
• 4
  撈回資料了，數據已接收完全

實際範例

透過 API 取得資料

var xhr = new XMLHttpRequest();
xhr.open('get', 'http://xxx', true);
xhr.send(null);
xhr.onload = function(data) {
   console.log(xhr.responseText);
};

POST(Form)

var xhr = new XMLHttpRequest();
xhr.open('post', 'http://xxx', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send('name=Bob&password=123456');

POST(JSON)

還記得昨日 Day20 有提到的 JSON 的轉換方法嗎，需要在送出前先將其他格式的資料透過 JSON.stringify 轉為字串。

var account = {
    name: 'Bob',
    password:'123456'
}
var xhr = new XMLHttpRequest();
xhr.open('post', 'https://xxx', true);
xhr.setRequestHeader('Content-type', 'application/json');
var data = JSON.stringify(account);
xhr.send(data);

But

上方的範例中只是做出一個請求就要打這麼多程式碼，若是現今普遍複雜的網站應用，又或是 SPA 這種單純靠 JS 與 AJAX 來控制內容的應用，程式碼中不就滿滿都是一直在建立新的 XMLHttpRequest 實例，而且送出一個請求也需要打那麼多行程式碼，更別提程式碼的可讀性、與後續的維護了。

jQuery

所以通常不會使用原生的方式來操作 AJAX，而是透過套件來解決，有寫過 JS 的人，沒有用過應該也會聽過的 jQuery，裡面就有提供更方便的方法來使用 AJAX。

程式碼大概長這樣，一目瞭然程式運行的邏輯，callback function 與 error 的處理也都很方便。

$.ajax({
    url: "http://xxx",
    type: "GET",
    success: function (result) {
        console.log(result);
    },
    error: function (error) {
        console.log("error:", error);
    }
});

這部分就不多做介紹，詳細的使用方法可以到網路上查看。

原本要一篇就講完，但篇幅有點多，還是拆成兩天來講，第二篇會講完 Fetch。

今日的分享就到這，我們明天見